<app-scale (confirm)="handleScale()"></app-scale>
<app-add-worker (confirm)="handleAddWorker()"></app-add-worker>
<app-remove-worker (confirm)="handleRemoveWorker()"></app-remove-worker>
<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-md-6 clr-col-6">
    <div class="card">
      <div class="card-header">
        集群状态
      </div>
      <div class="card-block" style="height: 200px">
        <table class="table">
          <tbody>
          <tr>
            <td>etcd</td>
            <td [ngStyle]="{'color':getServiceStatus('etcd') | statusColor }">{{getServiceStatus('etcd') | status}}</td>
          </tr>
          <tr>
            <td>kube-apiserver</td>
            <td
              [ngStyle]="{'color':getServiceStatus('kubernetes-apiservers') | statusColor }">{{getServiceStatus('kubernetes-apiservers') | status}}</td>
          </tr>
          <tr>
            <td>kube-controller</td>
            <td
              [ngStyle]="{'color':getServiceStatus('kubernetes-control-manager') | statusColor }">{{getServiceStatus('kubernetes-control-manager') | status }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-link" (click)="toHealth()">更多</button>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-6 clr-col-md-6 clr-col-6">
    <div class="card">
      <div class="card-header">
        Worker 状态
        <span style="float: right">Worker 数量: {{workers.length}}</span>
      </div>
      <div class="card-block" style="height: 200px;overflow:auto">
        <table class="table">
          <tbody>
          <tr *ngFor="let worker of workers">
            <td>{{worker.name}}</td>
            <td [ngClass]="{'worker-status-running': worker.status ==='RUNNING'}">{{worker.status | status}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer">
        <button *ngIf="currentCluster.deploy_type==='AUTOMATIC'" class="btn btn-sm btn-link" (click)="onScale()"
                [disabled]="currentCluster.status !== 'RUNNING'">伸缩
        </button>
        <button *ngIf="currentCluster.deploy_type==='MANUAL'" [disabled]="currentCluster.status !== 'RUNNING'"
                class="btn btn-sm btn-link" (click)="onAddWorker()">扩容
        </button>
        <button *ngIf="currentCluster.deploy_type==='MANUAL'" [disabled]="currentCluster.status !== 'RUNNING'"
                class="btn btn-sm btn-link" (click)="onRemoveWorker()">缩容
        </button>
      </div>
    </div>
  </div>

</div>
